<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="抽奖记录" subTitle="列表"/>
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option"
                 :table-loading="crudData.loading"
                 :data="crudData.data"
                 :page.sync="crudData.page"
                 v-model="crudData.form"
                 @refresh-change="refreshChange"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 ref="crud"
                 @on-load="onLoad">
      </avue-crud>
    </div>
  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import {reactive} from 'vue';
import {cordPage} from '@/api/user'
import TitleComponent from '@/components/title/index.vue';
import BasicContainer from "@/components/basic-container/main.vue";
import {useRouter} from "vue-router";

const router = useRouter();

let option: any = reactive({
  height: 'auto',
  calcHeight: 70,
  searchShow: true,
  searchMenuSpan: 24,
  searchMenuPosition: 'right',
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,
  gridBtn: true,
  menu: false,
  selection: false,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: true,
  searchShowBtn: false,
  indexWidth: 60,
  column: [
    {
      label: "用户账号",
      prop: "userAccount",
      search: true,
      span: 24,
    },
    {
      label: "ID",
      prop: "userId",
      search: true,
      sortable: true,
    },
    {
      label: "奖品名称",
      prop: "prizeName",
      search: true,
      span: 24,
    },
    {
      label: "抽奖方式",
      prop: "cjWay",
      search: true,
      type: 'select',
      filters: true,
      filterMethod: function (value, row, column) {
        return row.cjWay === value;
      },
      dicData: [
        {
          label: '抽奖',
          value: '1'
        },
        {
          label: '转盘',
          value: '2'
        },
        {
          label: '红包',
          value: '3'
        },
        {
          label: '积分',
          value: '4'
        },
        {
          label: '签到',
          value: '5'
        }
      ],
      span: 24,
    },
    {
      label: "抽奖时间",
      prop: "createTime",
      span: 24,
    }
  ]
})
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  index_unit: [],
  loading: true,
  query: {},
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  },
  filedArr: [],
  data: []
})

function refreshChange() {
  onLoad(crudData.page, crudData.query);
}

function searchChange(params: any, done: () => void) {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}

function currentChange(currentPage: any) {
  crudData.page.currentPage = currentPage;
}

function sizeChange(pageSize: any) {
  crudData.page.pageSize = pageSize;
}

const onLoad = (page: any, params = {}) => {
  crudData.loading = true;
  cordPage(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then((res: any) => {
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records;
    crudData.loading = false;
  });
  // crudData.data = [
  //   {
  //     id: '2',
  //     index: '662303',
  //     account: '4412349654',
  //     test: 'YouTube',
  //     test1: '1',
  //     test2: '2023-06-19 05:40:22',
  //   },
  //   {
  //     id: '5',
  //     index: '662301',
  //     account: '441223784',
  //     test: 'YouTube',
  //     test1: '1',
  //     test2: '2023-06-17 05:40:22',
  //   }
  // ]
  // crudData.page.total = crudData.data.length;

  // getList().then((res: any) => {
  //     console.log('getReviewLog--', res);
  //     const Data = res.data.data;
  //     // crudData.page.total = Data.total;
  //     crudData.logData = Data;
  //     crudData.loading = false;
  // });
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}
</style>
